
.commentListContainer {
    width: 100%;
    padding-right: 430px;
    box-sizing: border-box;
}

.commentListContainer.hasPull {
    padding-right: 480px;
    box-sizing: border-box;
}

.commentListContainer .getResourceBox {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% + 40px);
    border-bottom: 0.5px solid var(--gray_93);
}

.commentListContainer .getResourceBox .oprateBox {
    padding: 5px 0px;
    box-sizing: border-box;
    height: 46px;
    display: flex;
    align-items: center;
}

.commentListContainer .getResourceBox .oprateBox .likeBox {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 25px;
}

.commentListContainer .getResourceBox .oprateBox .likeBox .likeIcon {
    width: 36px;
    height: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .likeBox .likeIcon.active {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .likeBox .likeNum {
    color: var(--gray_50);
    height: 100%;
    line-height: 36px;
    font-family: "PingFang SC";
    font-size: 12px;
}

.commentListContainer .getResourceBox .oprateBox .likeBox .likeNum.active {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .oprateBox .likeBox:hover .likeIcon {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .likeBox:hover .likeNum {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 25px;
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox .disLikeIcon {
    width: 36px;
    height: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox .disLikeIcon.active {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox .disLikeText {
    color: var(--gray_50);
    height: 100%;
    line-height: 36px;
    font-family: "PingFang SC";
    font-size: 12px;
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox .disLikeText.active {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox:hover .disLikeIcon {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .disLikeBox:hover .disLikeText {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .oprateBox .favBox {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 25px;
}

.commentListContainer .getResourceBox .oprateBox .favBox .favIcon {
    width: 36px;
    height: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .favBox .favText {
    color: var(--gray_50);
    height: 100%;
    line-height: 36px;
    font-size: 12px;
}

.commentListContainer .getResourceBox .oprateBox .favBox:hover .favIcon,
.commentListContainer .getResourceBox .oprateBox .favBox.active .favIcon {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .favBox:hover .favText,
.commentListContainer .getResourceBox .oprateBox .favBox.active .favText {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .oprateBox .shareBox {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 25px;
}

.commentListContainer .getResourceBox .oprateBox .shareBox .shareIcon {
    width: 36px;
    height: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .shareBox .shareText {
    color: var(--gray_50);
    height: 100%;
    line-height: 36px;
    font-family: "PingFang SC";
    font-size: 12px;
}

.commentListContainer .getResourceBox .oprateBox .shareBox:hover .shareIcon {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .getResourceBox .oprateBox .shareBox:hover .shareText {
    color: var(--green_n);
}

.commentListContainer .getResourceBox .getResourceText {
    height: 28px;
    line-height: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #00e8cd 0%, #00c7bd 100%);
    font-size: 12px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}

.commentListContainer .titleBox {
    width: 100%;
    padding: 20px 0px 10px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.commentListContainer .titleBox .title {
    color: var(--gray_20);
    font-family: "PingFang SC";
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    /* 超出几行省略 */
}

.commentListContainer .titleBox .studyBox {
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.commentListContainer .titleBox .studyBox div {
    color: var(--gray_70);
    font-size: 12px;
    line-height: 16px;
}

.commentListContainer .titleBox .studyBox .studyIcon {
    width: 10px;
    height: 10px;
    background: var(--personIcon) no-repeat center center;
    background-size: cover;
    margin-right: 5px;
}

.commentListContainer .titleBox .studyBox .studyNum {
    font-size: 13px;
    margin-right: 10px;
}

.commentListContainer .titleBox .studyBox .studyTime {
    font-size: 13px;
}

.commentListContainer .commentBox {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0px;
    margin-bottom: 5px;
}

.commentListContainer .commentBox .commentTitle {
    font-weight: 700;
    font-size: 20px;
    color: var(--gray_20);
    font-family: PingFang SC;
}

.commentListContainer .commentBox .myCommentBox {
    display: flex;
    margin-top: 10px;
    /* Chrome */
    /* IE 10+ */
    /* Firefox 4-18 */
    /* Firefox 19+ */
}

.commentListContainer .commentBox .myCommentBox .myHeadPic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: 4px;
    margin-right: 10px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea {
    flex: 1;
    background: var(--gray_97);
    color: var(--gray_20);
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-input__count {
    color: var(--gray_85);
    background: transparent;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner {
    box-sizing: border-box;
    color: var(--gray_20) !important;
    padding: 6px 10px;
    min-height: 36px !important;
    max-height: 70px !important;
    border: none;
    line-height: 20px;
    background: var(--gray_97) !important;
    border-radius: 6px;
    font-weight: 400;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
        sans-serif;
    transition: height 0.3s ease 0.1s;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner::-webkit-input-placeholder {
    color: var(--gray_80);
    font-size: 14px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner::-moz-placeholder {
    color: var(--gray_80);
    font-size: 14px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner:-ms-input-placeholder {
    color: var(--gray_80);
    font-size: 14px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner::-ms-input-placeholder {
    color: var(--gray_80);
    font-size: 14px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea .el-textarea__inner::placeholder {
    color: var(--gray_80);
    font-size: 14px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea.myCommentFocus .el-textarea__inner {
    height: 70px !important;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea::-webkit-scrollbar {
    width: 2px;
}

.commentListContainer .commentBox .myCommentBox .MyTextarea::-webkit-scrollbar-thumb {
    background: var(--gray_90);
    border-radius: 32px;
}

.commentListContainer .commentBox .myCommentBox ::-webkit-input-placeholder {
    line-height: 24px;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray_80);
}

.commentListContainer .commentBox .myCommentBox :-ms-input-placeholder {
    line-height: 24px;
    color: var(--gray_80);
}

.commentListContainer .commentBox .myCommentBox :-moz-placeholder,
.commentListContainer .commentBox .myCommentBox ::-moz-placeholder {
    line-height: 24px;
    color: var(--gray_80);
    opacity: 1;
}

.commentListContainer .commentBox .myCommentBox .sendCommentBox {
    display: flex;
    align-items: flex-end;
}





.commentListContainer .commentBox .myCommentBox .sendCommentBox .sendComment {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: var(--sendComment) no-repeat center center;
    background-size: cover;
    margin-left: 10px;
    margin-bottom: 5px;
}

.commentListContainer .commentBox .myCommentBox .sendCommentBox .sendComment.active {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .otherCommentBox {
    width: 100%;
    box-sizing: border-box;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply {
    display: flex;
    align-items: center;
    color: var(--green_n);
    font-size: 12px;
    line-height: 15px;
    margin-left: 46px;
    padding-left: 38px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--gray_93);
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .moreReply {
    margin-right: 24px;
    display: flex;
    align-items: center;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .moreReply .moreText {
    cursor: pointer;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .moreReply .underArrowIcon {
    margin-left: 4px;
    width: 10px;
    height: 10px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .closeMoreReply {
    display: flex;
    align-items: center;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .closeMoreReply .closeMoreText {
    cursor: pointer;
}

.commentListContainer .otherCommentBox .commentMackUp .handleMoreReply .closeMoreReply .upArrowIcon {
    margin-left: 4px;
    width: 10px;
    height: 10px;
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .otherCommentBox .commentMackUp:last-child .handleMoreReply {
    border: none;
}

.commentListContainer .commentEndShow {
    width: 100px;
    height: 14px;
    margin: 0 auto;
    background-image: var(--ending);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.commentListContainer .bottomMyCommentBox {
    background: var(--bg_white);
    border-top: 0.5px solid var(--gray_93);
    position: fixed;
    bottom: 0;
    display: flex;
    margin-top: 10px;
    padding: 10px 20px 10px 0;
    /* Chrome */
    /* IE 10+ */
    /* Firefox 4-18 */
    /* Firefox 19+ */
}

.commentListContainer .bottomMyCommentBox .myHeadPic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: url(../static/img/defaultAvatar.04d129b7.png) no-repeat center center;
    background-size: cover;
    margin-right: 10px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea {
    flex: 1;
    padding: 6px 10px;
    height: 36px !important;
    max-height: 70px !important;
    border: none;
    line-height: 20px;
    background: var(--gray_97);
    color: var(--gray_20);
    border-radius: 6px;
    font-weight: 400;
    transition: height 0.3s ease 0.1s;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-input__count {
    color: var(--gray_85);
    background: transparent;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner {
    box-sizing: border-box;
    color: var(--gray_20);
    padding: 6px 10px;
    min-height: 36px !important;
    max-height: 70px !important;
    border: none;
    line-height: 20px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
        sans-serif;
    background: var(--gray_97) !important;
    border-radius: 6px;
    font-weight: 400;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner::-webkit-input-placeholder {
    font-size: 14px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner::-moz-placeholder {
    font-size: 14px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner:-ms-input-placeholder {
    font-size: 14px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner::-ms-input-placeholder {
    font-size: 14px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea .el-textarea__inner::placeholder {
    font-size: 14px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea.myCommentFocus .el-textarea__inner {
    height: 70px !important;
}

.commentListContainer .bottomMyCommentBox .MyTextarea::-webkit-scrollbar {
    width: 2px;
}

.commentListContainer .bottomMyCommentBox .MyTextarea::-webkit-scrollbar-thumb {
    background: var(--gray_90);
    border-radius: 32px;
}

.commentListContainer .bottomMyCommentBox ::-webkit-input-placeholder {
    line-height: 24px;
    font-weight: 400;
    font-size: 12px;
    color: var(--gray_80);
}

.commentListContainer .bottomMyCommentBox :-ms-input-placeholder {
    line-height: 24px;
    color: var(--gray_80);
}

.commentListContainer .bottomMyCommentBox :-moz-placeholder,
.commentListContainer .bottomMyCommentBox ::-moz-placeholder {
    line-height: 24px;
    color: var(--gray_80);
    opacity: 1;
}

.commentListContainer .bottomMyCommentBox .sendCommentBox {
    display: flex;
    align-items: flex-end;
}





.commentListContainer .bottomMyCommentBox .sendCommentBox.myCommentFocus .emojiListContent {
    top: -285px;
}

.commentListContainer .bottomMyCommentBox .sendCommentBox .sendComment {
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
    background: var(--sendComment) no-repeat center center;
    background-size: cover;
    margin-left: 10px;
}

.commentListContainer .bottomMyCommentBox .sendCommentBox .sendComment.active {
    background: url() no-repeat center center;
    background-size: cover;
}

.commentListContainer .noData {
    width: 100%;
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}

.commentListContainer .noData .noDataImg {
    height: 150px;
    width: 150px;
    background: var(--noComment);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.commentListContainer .noData .noDataText {
    margin-top: 5px;
    font-size: 14px;
    color: var(--gray_50);
    font-weight: 400;
    font-family: "PingFang SC";
}

.commentListContainer .plannerDialog {
    background: rgba(0, 0, 0, 0.5);
}

.commentListContainer .plannerDialog .el-dialog {
    width: unset;
}

.commentListContainer .plannerDialog .el-dialog__header {
    display: none;
}

.commentListContainer .plannerDialog .el-dialog__body {
    display: flex;
    padding: 0;
    overflow: unset;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
}

.commentListContainer .plannerDialog .el-dialog__body .closeIcon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    position: absolute;
    right: 0;
    top: -34px;
}

.commentListContainer .plannerDialog .el-dialog__body .plannerImg {
    max-height: 80vh;
    width: 100%;
}




.materialListContainer {
    width: 400px;
    padding-bottom: 300px;
    position: absolute;
    top: unset;
    bottom: unset;
}

.materialListContainer.fixedFlag {
    position: fixed;
    bottom: 20px;
}

.materialListContainer .holdBox {
    width: 400px;
    height: calc(max(570px, min(calc(177.778vh - 180px), calc(100vw - 400px - 180px + 30px))) * .5625);
}

.materialListContainer .holdBox.hasPull {
    height: calc(max(570px, min(calc(177.778vh - 180px), calc(100vw - 60px))) * .5625) !important;
}

.materialListContainer .contentRight {
    width: 400px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--gray_98);
    height: calc(max(570px, min(calc(177.778vh - 180px), calc(100vw - 400px - 180px + 30px))) * .5625);
    height: calc(max(570px, min(calc(177.778vh - 180px), calc(100vw - 400px - 180px + 30px))) * .5625);
}

.materialListContainer .contentRight.noProduct {
    height: calc(100vh - 110px);
}

.materialListContainer .contentRight.hasPull {
    margin-top: 30px;
    height: 500px;
}

.materialListContainer .contentRight .courseBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray_93);
    border-radius: 10px;
    box-shadow: 0px 2px 8px #193c810f;
    height: 100%;
}

.materialListContainer .contentRight .courseBox.hasPull {
    height: 500px !important;
}

.materialListContainer .contentRight .courseBox .courseTop {
    display: flex;
    padding: 20px;
    background: var(--bg_white);
    border-radius: 10px 10px 0 0;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL {
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 8px;
    flex-direction: column;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseTitleBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseTitleBox .courseTitle {
    color: var(--gray_20);
    font-weight: 600;
    font-size: 18px;
    word-break: break-all;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseTitleBox .courseTitle .courseLabel {
    display: inline-block;
    margin-left: 2px;
    width: 38px;
    height: 15px;
    border-radius: 2px;
    line-height: 15px;
    text-align: center;
    color: var(--yellow_n);
    padding: 0px 3px;
    font-family: "PingFang SC";
    font-size: 11px;
    font-weight: 400;
    position: relative;
    top: -2px;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseTitleBox .courseTitle .courseLabel.upDating {
    border: 1px solid var(--yellow_n);
    color: var(--yellow_n);
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseTitleBox .courseTitle .courseLabel.finished {
    border: 1px solid var(--gray_50);
    color: var(--gray_50);
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopL .courseText {
    margin-top: 6px;
    color: var(--gray_50);
    font-size: 12px;
    font-family: "PingFang SC";
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    /* 超出几行省略 */
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopR {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 24px;
    border-radius: 13px;
    background: var(--green_n);
    font-size: 12px;
    color: var(--on_surface);
    line-height: 24px;
    text-align: center;
    padding: 0px 9px;
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopR.hasRemind {
    color: var(--gray_70);
    background: var(--gray_95);
}

.materialListContainer .contentRight .courseBox .courseTop .courseTopR.hasRemind .littleRing {
    height: 12px;
    width: 12px;
    background: var(--littleRing);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    margin-right: 2px;
}

.materialListContainer .contentRight .courseBox .courseListBox {
    flex: 1;
    height: 100%;
    padding-top: 20px;
    background: var(--bg_gray);
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
    padding-bottom: 36px;
}

.materialListContainer .contentRight .courseBox .courseListBox::-webkit-scrollbar {
    width: 6px;
}

.materialListContainer .contentRight .courseBox .courseListBox::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: var(--gray_90);
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList {
    margin: 0 20px 15px;
    border-radius: 15px;
    border: 0.5px solid var(--gray_95);
    box-sizing: border-box;
    background: var(--bg_white);
    padding: 15px 15px 15px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList:hover {
    transform: scale(1.05);
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.active .courseListIcon {
    height: 36px;
    width: 36px;
    background: var(--playIngIcon) no-repeat center center;
    background-size: cover;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.active .courseListRight .courseListName {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    /* 超出几行省略 */
    color: var(--green_n);
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.lecture .courseListIcon {
    height: 36px;
    width: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .courseListIcon {
    height: 36px;
    width: 36px;
    background: url() no-repeat center center;
    background-size: cover;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .courseListBottom .advanceBook {
    margin: 10px 0 0 8px;
    width: 54px;
    height: 15px;
    border-radius: 2px;
    background: var(--gray_70, #a9acb2);
    color: var(--on_surface, #ffffff);
    font-size: 12px;
    text-align: center;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .right {
    margin-left: 10px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .right .bookBtn .addIcon {
    width: 13px;
    height: 13px;
    background: url() no-repeat center center;
    background-size: contain;
    margin-right: 4px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .right .bookBtn .toBook {
    width: 66px;
    height: 24px;
    color: var(--on_surface);
    background: linear-gradient(135deg, #00e8cd 0%, #00c7bd 100%);
    border-radius: 22px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0px 0px 0px 12px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.mock .right .hasBooked {
    width: 66px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    color: var(--gray_70);
    border: 0.5px solid var(--gray_96, #f0f2f5);
    border-radius: 22px;
    font-size: 12px;
    background: var(--gray_98, #f7f8fa);
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.liveing .courseListRight .courseListBottom .courseListLiveProgress {
    padding: 0px 3px;
    margin-left: 8px;
    background: var(--green_n);
    color: var(--on_surface);
    display: flex;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList.liveing .courseListRight .courseListBottom .courseListLiveProgress .liveGifImg {
    margin-right: 1px;
    content: '';
    display: inline-block;
    height: 12px;
    width: 12px;
    background: url(../static/img/littlePlayIcon.2d7e008b.gif) no-repeat center center;
    background-size: cover;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListIcon {
    width: 36px;
    height: 36px;
    background: url() no-repeat center center;
    background-size: cover;
    margin-right: 12px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListName {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    /* 超出几行省略 */
    color: var(--gray_20);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom {
    color: var(--gray_50);
    font-size: 12px;
    line-height: 15px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 400;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .studyNumBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .studyNumBox .studyIcon {
    width: 10px;
    height: 10px;
    background: var(--personIcon) no-repeat center center;
    background-size: cover;
    margin-right: 5px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .courseListTime,
.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .courseListProgress {
    margin-top: 10px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .courseListBottomLine {
    margin: 8px 8px 0 8px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .courseListLiveProgress {
    margin-top: 10px;
    height: 15px;
    border-radius: 2px;
    background: var(--gray_70);
    line-height: 15px;
    padding: 0 3px;
    color: var(--on_surface);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.materialListContainer .contentRight .courseBox .courseListBox .courseList .courseListRight .courseListBottom .hasDone {
    margin: 8px 0px 0px 4px;
    width: 10px;
    height: 10px;
    background: url() no-repeat center center;
    background-size: cover;
}

.materialListContainer .contentRight .courseBox .courseEndShow {
    margin: 0 auto;
    width: 100px;
    height: 14px;
    background: var(--ending);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.materialListContainer .relateCourseList {
    margin-top: 30px;
    padding: 20px 0 0 0;
    border-radius: 2px;
}

.materialListContainer .relateCourseList .relateCourseTitle {
    color: var(--gray_20);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px;
}

.materialListContainer .relateCourseList .singleCourse {
    cursor: pointer;

    display: flex;
    margin-bottom: 15px;
    border-radius: 15px;
    border: 0.5px solid var(--gray_93);
    -webkit-box-shadow: 0 2px 6px #1e6d940a;
    box-shadow: 0 2px 6px #1e6d940a;
    padding: 15px;
    background: var(--bg_white);
}

.materialListContainer .relateCourseList .singleCourse .showImage {
    width: 95px;
    height: 95px;
    background-size: cover;
    border-radius: 10px;
}

.materialListContainer .relateCourseList .singleCourse .productInfo {
    margin-left: 10px;
    padding-top: 4px;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .productName {
    font-size: 15px;
    color: var(--gray_0);
    font-weight: 600;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .subtitle {
    margin-top: 6px;
    color: var(--gray_50);
    font-weight: 300;
    font-size: 12px;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .priceWrap {
    margin-top: 3px;
    color: var(--red_n);
    font-size: 12px;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .priceWrap span {
    display: inline-block;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .priceWrap .unit {
    font-weight: 600;
    vertical-align: -webkit-baseline-middle;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .priceWrap .price {
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    vertical-align: middle;
}

.materialListContainer .relateCourseList .singleCourse .productInfo .priceWrap .textQi {
    vertical-align: -webkit-baseline-middle;
}

.materialListContainer .relateCourseList :last-child {
    margin-bottom: 0;
}

.materialListContainer .remindDialog .el-dialog {
    background-color: var(--bg_white);
}

.materialListContainer .remindDialog .el-dialog__header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid var(--gray_93);
    text-align: center;
}

.materialListContainer .remindDialog .el-dialog__header .el-dialog__title {
    color: var(--gray_20);
}

.materialListContainer .remindDialog .el-dialog__header .el-dialog__close::before {
    width: 24px;
    height: 24px;
}

.materialListContainer .remindDialog .el-dialog__body {
    height: 222px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    justify-content: center;
    align-items: center;
}

.materialListContainer .remindDialog .el-dialog__body .remindText {
    line-height: 20px;
    font-size: 14px;
    color: var(--gray_20);
}

.materialListContainer .remindDialog .el-dialog__body .el-checkbox {
    margin: 10px 0px 30px 89px;
}

.materialListContainer .remindDialog .el-dialog__body .el-checkbox .el-checkbox__label {
    color: var(--gray_50);
    font-size: 13px;
}

.materialListContainer .remindDialog .el-dialog__body .el-checkbox .el-checkbox__input .el-checkbox__inner {
    border-color: var(--gray_50);
    background-color: var(--gray_100);
}

.materialListContainer .remindDialog .el-dialog__body .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--green_n);
    border-color: transparent;
}

.materialListContainer .remindDialog .el-dialog__body .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
    color: var(--gray_50);
}

.materialListContainer .remindDialog .el-dialog__body .remindConfirm {
    width: 120px;
    height: 38px;
    cursor: pointer;
    line-height: 38px;
    border-radius: 35px;
    border: 1px solid var(--green_n);
    color: var(--green_n);
    font-size: 14px;
    text-align: center;
    margin-left: 80px;
}



.openContainer .openPlayContent .containerRight {
    width: 400px;
    position: absolute;
    right: 50px;
    top: unset;
}
.pageCommonContainer {
    flex: 1;
}
.openContainer{
    background: var(--bg_white);
}
.openContainer .openPlayContent{
    margin: 0 auto;
    display: flex;
    padding: 20px 50px;
    position: relative;
    box-sizing: border-box;
    min-width: 1100px;
}

.openContainer .openPlayContent .contentLeft {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 130px;
    flex: 1;
}
.openContainer .openPlayContent .contentLeft .playContent{
    padding-right: 430px;
    box-sizing: border-box;
    width: 100%;
    height: calc(max(570px,min(calc(177.778vh - 180px), calc(100vw - 400px - 180px + 30px) )) * .5625);
}
.openContainer .playContent{
    display: flex;
    justify-content: center;
    align-items: center;
}
.openContainer .openPlayContent .contentLeft .pull {
    z-index: 1;
    width: 12px;
    height: 64px;
    background-image: var(--pull);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    cursor: pointer;
}
.openContainer .playContent .addRemindBox {
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.openContainer .playContent .addRemindBox .startTime {
    color: #e1e3e5;
    font-family: "PingFang SC";
    font-weight: 500;
    font-size: 26px;
    text-align: center;
}
.openContainer .playContent .addRemindBox .toAdd {
    margin-top: 25px;
    cursor: pointer;
    width: 140px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #05c1b7;
    text-align: center;
    color: #ffffff;
    line-height: 38px;
}
.textareaTxt:empty:before {
    content: attr(placeholder);
    color: var(--gray_80);
}


